<template>
  <div class="box1">
    <h1>本周热门</h1>
    <ul class="listBox">
      <li v-for="(data, index) in dataList" :key="index">
        <div class="imgBox">
          <img src="../../assets/imgs/PrdShow_1643426577356.webp" alt="" />
          <p>{{data.name}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.box1 {
  width: 75%;
  height: 31.25rem;
  float: left;
  background-color: rgb(255, 255, 255);
  margin-top: 3rem;
}
.box1 h1 {
  text-align: center;
  margin: 10px auto;
}
.listBox {
  width: 100%;
}
.listBox li {
  width: 33.33%;
  height: 6.875rem;
  float: left;
}
.imgBox {
  width: 70%;
  margin: 0 auto;
}
.imgBox img {
  width: 100%;
  height: 60px;
}
.imgBox p{
  text-align: center;
}
</style>

<script>
export default {
  data () {
    return {
      dataList: []
    }
  },

  mounted () {
    fetch(`http://127.0.0.1/classift?index=${0}`)
      .then(res => res.json())
      .then((res) => {
        console.log(res)
        this.dataList = res
      })
    this.$bus.$on('aMsg', (index) => {
      console.log(index)

      fetch(`http://127.0.0.1/classift?index=${index}`)
        .then(res => res.json())
        .then((res) => {
          console.log(res)
          this.dataList = res
        })
    //   fetch("./json/maizuo.json")
    //     .then((res) => res.json())
    //     .then((res) => {
    //       this.datalist = res.data.films;
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    })
  }
}
</script>
